/* 
    轮播图 --初始化插件
 */
    var mySwiper = new Swiper ('.swiper', {
        loop: true, // 无限循环模式

        pagination: { //分页器
          el: '.swiper-pagination',
          clickable :true, //可以点击分页器
        },  

        navigation: { // 前进后退按钮
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
      })       



/* 
    获取元素
*/
      let apiPicLi=document.querySelectorAll('.api-pic') //获取API分类的li标签



/* 
    1.鼠标移入api-pic(li标签)，改变li背景颜色，改变p标签字体颜色，
      修改当前api-pic下面的img：src路径
*/

      /*
        方法一：修改图片文件名
          注：scr的地址与当前li标签的索引有关系--index+1
      */
      /* //遍历
      apiPicLi.forEach(function(dom,index){ //dom：遍历的每一个li  index：遍历的每一个li的索引
        
        //鼠标移入
        dom.addEventListener('mouseover',function(){
          this.style.backgroundColor='#2F7EE9'
          this.querySelector('p').style.color='white' //获取鼠标移入当前li下面的p标签，设置颜色
          this.querySelector('img').src=`../imgs/api0${index+1}-c.svg` //获取鼠标移入当前li下面的img，修改路径
        })

        //鼠标移出
        dom.addEventListener('mouseout',function(){
          this.style.backgroundColor='white'
          this.querySelector('p').style.color='#333'
          this.querySelector('img').src=`../imgs/api0${index+1}.svg`
        })
      }) */


      /* 
        方法二：鼠标移入当前li，找到当前img：src图片的名字（通过截取），
          再修改路径，给src名字加上-c
      */
     //定义变量保存移入时src的名字
     let srcName=''
      //遍历
      apiPicLi.forEach(function(dom,index){ //dom：遍历的每一个li  index：遍历的每一个li的索引
          
        //鼠标移入
        dom.addEventListener('mouseover',function(){
          this.style.backgroundColor='#2F7EE9'
          this.querySelector('p').style.color='white'

          let imgSrc=this.querySelector('img').src //获取img的src的名字（是字符串）
          //console.log(imgSrc);
          let pos1=imgSrc.lastIndexOf('/'); //lastIndexOf():找到指定字符最后出现的索引位置
          let pos2=imgSrc.lastIndexOf('.');

          //substring(1,3)：从索引1截取到索引2---[1,3)-->1,2
          srcName=imgSrc.substring(pos1+1,pos2);
          //修改路径
          this.querySelector('img').src=`../imgs/${srcName}-c.svg`
        })

        //鼠标移出
        dom.addEventListener('mouseout',function(){
          this.style.backgroundColor='white'
          this.querySelector('p').style.color='#333'
          //还原路径
          this.querySelector('img').src=`../imgs/${srcName}.svg`
        })
      })







/* 
      2.每隔1.5s，干掉上一个带激活属性的b-c（active）
                  给下一个b-c添加激活属性
*/
      //获取元素
      let bc=document.querySelectorAll('.b-c')
      //console.log(bc);

      //定义带有激活属性的索引
      let index=0
      //开启计时器 (调用的函数)
      let Id=setInterval(horseRaceLamp,1500)

/* 
      3.鼠标移入business-cont(bc上一级大框框)，关闭计时器
        鼠标移出，开启计时器
*/
      let businessCont=document.querySelector('.business-cont')

      //鼠标移入
      businessCont.addEventListener('mouseover',function(){
        clearInterval(Id)//关闭计时器
      })
      //鼠标移出
      businessCont.addEventListener('mouseout',function(){
        Id=setInterval(horseRaceLamp,1500) //计时器id一样是为了保证关闭一次计时器打开的还是原来那个计时器（同一个计时器）
      })

      //把函数从计时器里拿出来，方便调用
      function horseRaceLamp(){   
        //先干掉原有的激活属性
        bc[index].classList.remove('active')
        //索引自增一个
        ++index

        //判断 索引达到长度值回到第一个bc循环
        if(index===bc.length){
          index=0
        }

        //给下一个添加激活属性
        bc[index].classList.add('active')  
      }





    //获取元素
    let btnTop=document.querySelector('.btnTop') //回到顶部按钮
/* 
      4.鼠标移入btnTop(回到顶部)，background-position-Y=-20px
*/
      
      //鼠标移入
      btnTop.addEventListener('mouseover',function(){
        btnTop.style.backgroundPositionY='-98px'
      })
      //鼠标移出
      btnTop.addEventListener('mouseout',function(){
        btnTop.style.backgroundPositionY='-56px'
      })

/* 
      5.当滚动条滚动距离大于1000时，显示btnTop，否则隐藏
*/
      window.addEventListener('scroll',function(){
        //获取滚动条滚动的距离
        let sTop=document.documentElement.scrollTop
        //console.log(sTop);

        //判断滚动距离
        if(sTop>=1000){
          btnTop.style.display='block'
        }else{
          btnTop.style.display='none'
        }
      })

/* 
      6.点击btn（回到顶部），缓慢回到顶部
*/
      btnTop.addEventListener('click',function(){
        //window.scrollTo(0,0) //瞬间回到
        window.scrollTo({
          top:0,
          behavior:"smooth"
        })
      })